<script setup lang="ts">
import { reactive, readonly, shallowReactive } from 'vue';

// reactive用于响应式 数组或者 对象, 简单数据类型使用 ref
// let nums = reactive([])
let message = reactive({            
    name: '张三'
})

// let nums = reactive<number[]>([])

// 第二种
type O = {
    list: number[]
}
let nums = reactive<O>({
    list: []
})

let copy = readonly(message)     

let wan = shallowReactive({
    text: '未读消息',
    hix: {
        tix: {
            nix: '未读邮件'
        }
    }
})

const changeMsg = () => {
    message.name="李四"
    let arr = [1, 2, 3, 4]
    // nums = arr             // 这样会破坏响应式
    // nums.push(...arr)         // 第一种， 这样解决
    nums.list = arr
    // copy.name = '王五'        // 不生效，  copy为只读的，不可以修改，会有警告

    wan.text = '已读消息'     // 可以修改
    wan.hix.tix.nix = '已读邮件'    // 可以改变, dom的值也变了，原因通 ref 和 shallowRef
    console.log(wan);
}

const change2 = () => {
    wan.hix.tix.nix = '已读邮件'   // 挂载到dom上的修改不了， 打印出来的值变了，但dom不更新
    console.log(wan);
}
</script>

<template>
  <div>
    <button @click="changeMsg">change</button>
    <div>{{message}}</div>
    <div>{{nums}}</div>
    <!-- <div>{{copy}}</div> -->
    <div>{{wan}}</div>
    <button @click="change2">change</button>
  </div>
</template>

<style>
</style>